<script setup>

import {Edit, Check, Refresh} from "@element-plus/icons";
import {reactive, ref} from "vue";
import request from '@/utils/request'
import router from "@/router";
import {ElMessage} from "element-plus";
//表单引用
const getuserFormRef=ref()
//表单的数据模型
const getuserForm=reactive({
  username:'',
  email:''
})
const nextBtn=()=>{
  request({
    url:'http://localhost:8500/sys/user/getnewone',
    method:'get',
    params:getuserForm,
  }).then(req => {
    if (200 == req.data.errorCode) {
      router.push("/changepassword")
    }else {
      ElMessage({
        type: 'error',
        message: '您输入的账号不存在，请检查后输入！'
      })
    }
  })
}
const turnBtn=()=>{
  router.push('/')
}
</script>

<template>
  <div class="bg">
    <div class="up">
      <el-row>
        <el-col :span="9" style="margin-top: 30px">
          <div class="up_first">账号安全中心 <el-divider direction="vertical" />
            <span class="up_second">密码管理</span>
          </div>
        </el-col>
        <el-col :span="8"></el-col>
        <el-col :span="7"></el-col>
      </el-row>
      <div>
      <el-row>
        <el-col :span="18" :offset="6" style="margin-top: 30px">
          <el-steps
              class="mb-4"
              style="max-width: 600px"
              :space="200"
              :active="1"
              simple
          >
            <el-step title="输入账号" :icon="Edit" />
            <el-step title="修改密码" :icon="Refresh" />
            <el-step title="修改成功" :icon="Check" />
          </el-steps>
        </el-col>
      </el-row>
      </div>
    </div>
    <div class="content">
      <div>
      <el-form
        ref="getuserFormRef"
        :model="getuserForm"
      style="margin-left: 40%">
        <el-form-item prop="username" label="账号">
      <el-input v-model="getuserForm.username"
                style="width: 300px;
                height: 40px;
                font-weight: bolder;"
                placeholder="请输入您的账号" />
        </el-form-item>
        <el-form-item prop="email" label="邮箱">
          <el-input v-model="getuserForm.email"
                    style="width: 300px;
                    height: 40px;
                    font-weight: bolder;"
                    placeholder="请输入您的邮箱" />
        </el-form-item>
      </el-form>
      </div>
      <div style="margin-top: 30px">
        <el-button
            style="width: 150px;
          height: 40px;
          margin-left:90px;"
            type="primary"
            @click="turnBtn">
          上一步
        </el-button>
      <el-button
          style="width: 150px;
          height: 40px;
          margin-left:90px;"
          type="primary"
          @click="nextBtn">
        下一步
      </el-button>
      </div>
    </div>
</div>

</template>

<style scoped>
.bg {
  width: 100%;
  height: 100%;
  background-image: url("../assets/imgs/bgimg.jpg");
  background-size: cover; /* 使图片平铺满整个浏览器（从宽和高的最大需求方面来满足，会使某些部分无法显示在区域中） */
  position: absolute; /* 不可缺少 */
  z-index: -1;
  background-repeat: no-repeat;
}
.up_first{
  font-size: 25px;
  font-weight: bolder;
}
.up_second{
  font-size: 20px;
}
.content{
  margin-top: 10px;
  margin-left: 30px;
}
.content{
  margin-top: 80px;
}
</style>